<template>
	<view class="wrap">
		<view class="list-cell">
			<u-avatar class="user-images" text="安" randomBgColor></u-avatar>
			<view class="user-info">
				<view class="user-info__top">
					<span class="user-name">安静</span><u-icon size="15" color="#f04d94" name="woman"></u-icon>
				</view>
				<view class="user-other">工号：8888 8888</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<u-cell-group class="u-cell-list" :border="false">
			<u-cell class="u-cell-item">
				<u-icon slot="icon" class="u-cell__icon" size="20" name="file-text" color="#999999" :bold="true"></u-icon>
				<view slot="title" class="u-cell__title">所属架构</view>
				<view slot="value" class="u-cell__value">勤工俭学</view>
			</u-cell>
			<u-cell class="u-cell-item" @tap="$u.throttle(clickCell('13898987878'), 5000)">
				<u-icon slot="icon" class="u-cell__icon" size="20" name="phone" color="#999999" :bold="true"></u-icon>
				<view slot="title" class="u-cell__title">手机</view>
				<view slot="value" class="u-cell__value">13898987878</view>
			</u-cell>
			<u-cell class="u-cell-item" @tap="$u.throttle(clickCell('upugpbvrtge@188.com'), 5000)">
				<u-icon slot="icon" class="u-cell__icon" size="20" name="email" color="#999999" :bold="true"></u-icon>
				<view slot="title" class="u-cell__title">邮箱</view>
				<view slot="right-icon" class="u-cell__value">upugpbvrtge@188.com</view>
			</u-cell>
		</u-cell-group>
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		clickCell(e) {
			console.log(e);
			uni.setClipboardData({
				data: e,
				success: function() {
					uni.showToast({
						title: '复制成功'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
@import 'personal-details.scss';

page {
	background-color: #f5f5f5;
}
 
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
	align-items: center;
}

.user-images{
	width: 80rpx;
	height: 80rpx;
	margin: 0 15px 0 5px;
}

.user-info__top {
	display: flex;
	flex-direction: row;
}

.user-name{
	font-size: 32rpx;
	color: #000000;
}

.user-other{
	font-size: 26rpx;
	color: #999999;
	font-weight: normal;
}

.u-cell-list {
	background: #fff;
}

.u-cell__icon {
	margin: 2px;
}

.u-cell__title {
	width: 93px;
	color: #999999;
}

.u-cell__value {
	width: 450rpx;
}

.u-cell-item:nth-child(2) .u-cell__value {
	color: #5b95ff;
}

.u-cell-item:nth-child(3) .u-cell__value {
	color: #5b95ff;
}
</style>